<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <title>生意帮</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../../css/common.css" />
    <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../../css/aui-pull-refresh.css" />
    <link rel="stylesheet" type="text/css" href="../../css/swiper.min.css">
    <link rel="stylesheet" type="text/css" href="../../css/aui-slide.css" />
    <style>
        html,
        body {
            background-color: transparent;
        }

        .boxB {
            position: relative;
            width: 100%;
            height: 100vh;
            background-color: #fff;
        }

        .mask {
            position: absolute;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.3);
        }

        .aui-content {}

        .head_right .aui-pull-right {
            border: 1px solid #999;
            border-radius: 50%;
            height: 1rem;
            width: 1rem;
            text-align: center;
            line-height: 1rem;
        }

        .aui-iconfont {
            font-size: 0.6rem;
            vertical-align: top;
        }

        .head_right {
            position: relative;
        }

        .clearfix:after {
            content: '';
            display: block;
            clear: both;
        }

        #app .inp_header {
            color: #333;
            font-size: 0.9rem;
            text-align: center;
            padding: 0.75rem;
        }

        .boxB .inp_list {
            text-align: center;
            background-size: 100% 0;
            padding: 0;
            font-size: 0;
            position: relative;
            overflow: hidden;
        }

        .inp_list div {
            width: 2rem;
            height: 2rem;
            margin: 0 0.3rem;
            display: inline-block;
            line-height: 2rem;
            text-align: center;
            border: 1px solid #ccc;
            font-size: 1.2rem;
            font-weight: bold;
            color: #333;
            position: relative;
        }

        .inp_list .active:after {
            position: absolute;
            content: '*';
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            line-height: 2rem;
            /*border-radius: 50%;*/
            font-size: 1.2rem;
            /*background-color: #333;*/
        }

        .inp_list input {
            position: absolute;
            top: -100%;
            left: 0;
            width: 100%;
            height: 100%;
            font-size: 12px;
            opacity: 0;
            -webkit-opacity: 0;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="boxB">
            <div class="aui-content">
                <ul class="aui-list aui-media-list">
                    <li class="inp_header">
                        请再次输入新密码
                    </li>
                    <li class="inp_list" @click="inpFocu()">
                        <div></div>
                        <div></div>
                        <div></div>
                        <div></div>
                        <div></div>
                        <div></div>
                        <input type="number" id="inp" name="" value="" v-model='password'>
                    </li>
                </ul>
            </div>
        </div>
    </div>

</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/zepto.js"></script>
<script type="text/javascript" src="../../script/vue.min.js"></script>
<script type="text/javascript" src="../../script/utils.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript" src="../../script/aui-tab.js"></script>
<script type="text/javascript" src="../../script/aui-scroll.js"></script>
<script type="text/javascript" src="../../script/aui-pull-refresh.js"></script>
<script type="text/javascript" src="../../script/swiper.min.js"></script>
<script type="text/javascript" src="../../script/aui-slide.js"></script>
<script type="text/javascript" src="../../script/aui-lazyload.js"></script>
<script type="text/javascript">
    function openF() {
        api.closeFrame();
    }

    apiready = function() {
        var app = new Vue({
            el: '#app',
            data: {
                code: api.pageParam.code,
                oldpassword: api.pageParam.password,
                password: '',
                token: ''
            },
            created: function() {
                var $_this = this;
                $_this.token = $api.getStorage('token');

            },
            methods: {
                inpFocu: function() {
                    $('#inp').focus();
                }
            },
            mounted: function() {},
            watch: {
                password: function() {
                    var $_this = this
                        // $('.inp_list div').eq($_this.password.length - 1).addClass('active')
                    $('.inp_list div').each(function(i) {
                        if (i < $_this.password.length) {
                            $('.inp_list div').eq(i).addClass('active')
                        } else {
                            $('.inp_list div').eq(i).removeClass('active')
                        }
                    })
                    if ($_this.password.length >= 6) {
                        $('#inp').blur();
                        // console.log($_this.code+'----------------'+$_this.oldpassword+'+++++++++++++++++++++++++++++'+$_this.password)
                        if($_this.oldpassword != $_this.password) {
                          api.toast({
                              msg: '两次密码输入不一致！',
                              duration: 2000,
                              location: 'bottom'
                          });
                          $_this.password = '';
                          return;
                        }
                        api.ajax({
                            url: window.Url.Freeucenter_changePass,
                            method: 'post',
                            data: {
                                values: {
                                    token: $_this.token,
                                    type: 5,
                                    code: $_this.code,
                                    password: Base64.encode('UNO'+$_this.oldpassword+'HACHA'),
                                    repassword: Base64.encode('UNO'+$_this.password+'HACHA')
                                }
                            }
                        }, function(ret, err) {
                            if (ret) {
                                api.toast({
                                    msg: ret.info,
                                    duration: 1000,
                                    location: 'bottom'
                                });
                                if (ret.re == 1) {
                                  if($api.getStorage('xxzf')==0){
                                    setTimeout(function() {
                                      api.closeWin({name: 'paymentCode'});
                                      api.closeWin({name: 'payChange'});
                                      api.closeWin({name: 'type'});
                                      api.closeWin({});
                                    },1000)
                                  }else {
                                    $api.setStorage('xxzf', 0);

                                    setTimeout(function(){
                                      api.closeToWin({
                                          name: 'root'
                                      });
                                    },1000)
                                  }

                                }
                            } else {
                                api.alert({
                                    msg: JSON.stringify(err)
                                });
                            }
                        })
                    }
                }
            }
        })
    }
</script>

</html>
